<template>
    <h3>学测先锋管理系统</h3>
    <div class="Visualized">
        <div class="box">
            <p>技术类别占比示意图</p>
            <div id="main" style="width: 600px;height: 400px;"></div>
        </div>
        <div class="box">
            <p>试卷类别占比示意图</p>
            <div id="main2" style="width: 600px;height: 400px;"></div>
        </div>
    </div>

    <div class="topic-list">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="100" />
            <el-table-column prop="name" label="试卷名称" width="1000" />
            <!-- <el-table-column prop="question" label="题目" width="600" /> -->
            <!-- <el-table-column prop="answer" label="答案" width="80" /> -->
            <el-table-column prop="total" label="总分" width="150" />

        </el-table>
    </div>
    <router-view></router-view>
    <!-- <TopicList></TopicList> -->

</template>



<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, reactive, watch } from 'vue';
import { categoryList, examList, } from './api/request'
import { ElMessage } from 'element-plus';



onMounted(() => {
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        qtitle: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '前端' },
                    { value: 735, name: '后端' },
                    { value: 580, name: '嵌入式' },
                    { value: 484, name: '软件测试' },
                    { value: 300, name: 'AI智能' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]

    });
})

// // 绘制图表
// myChart.setOption({
//         legend: {
//             top: 'bottom'
//         },
//         series: [
//             {
//                 name: 'Area Mode',
//                 type: 'pie',
//                 radius: [20, 120],
//                 center: ['40%', '50%'],
//                 roseType: 'area',
//                 itemStyle: {
//                     borderRadius: 5
//                 },
//                 data: [
//                     { value: 30, name: 'HTML5考试' },
//                     { value: 28, name: 'Vue考试' },
//                     { value: 26, name: 'Vue进阶' },
//                     { value: 24, name: 'JAVA基础' },
//                     { value: 22, name: 'c语言考试' },
//                     { value: 20, name: '数据库考试' },
//                     { value: 18, name: '单片机考试' },
//                     { value: 16, name: 'PHP基础考试' },
//                     { value: 16, name: 'PHP进阶' },
//                 ]
//             }
//         ]


//     });
onMounted(() => {
    // 延迟初始化图表，以确保数据已加载  
    setTimeout(() => {
        let myChart = echarts.init(document.getElementById('main2'));
        // 从 tableData 中提取数据并转换为 ECharts 所需的格式  
        const chartData = tableData.value.map((item: { someValueProperty: any; name: any; }) => ({
            value: item.someValueProperty, // 假设你有一个属性表示值，这里需要替换为实际的属性名  
            name: item.name // 使用表格中的 name 属性  
        }));

        // 绘制图表  
        myChart.setOption({
            legend: {
                top: 'bottom'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: [20, 120],
                    center: ['40%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 5
                    },
                   
                    chartData: chartData,// 使用动态生成的数据  
                    data: [
                        { value: 30, name: 'HTML5' },
                        { value: 28, name: 'Vue考试' },
                        { value: 26, name: 'Vue进阶' },
                        { value: 24, name: 'JAVA基础' },
                        { value: 22, name: 'c语言考试' },
                        { value: 20, name: '数据库考试' },
                        { value: 18, name: '单片机考试' },
                        { value: 16, name: 'PHP基础考试' },
                        { value: 16, name: 'PHP进阶' },
                    ]
                }
                
            ]
        });
    }, 150); // 延迟1秒，确保数据已加载（根据实际情况调整或移除延迟）  
});




// 表格数据
const tableData = ref<any>([])

interface RuleForm {
    id: string
    name: string
    text: string
    time: number | string
    total: number | string
    passline: number | string
    eid?: string
    num: number | string
    score: number | string
}
const categories = ref<any>([])

const form = reactive<RuleForm>({
    id: "",
    text: "",
    name: "",
    time: 2,
    total: 100,
    passline: 60,
    num: 0,
    score: 0
})

// 侦听器
watch(form, (newForm: any) => {
    if (newForm.total && newForm.num) {
        form.score = newForm.total / newForm.num
    }
})
// 获取试卷列表
const examListFn = async () => {
    await examList()
        .then(
            content => {
                // console.log('111',content);
                let { code, msg, result } = content;
                if (code == 200) {
                    let arr = result.map((item: any, i: number) => {
                        item.index = i + 1;
                        return item
                    })
                    tableData.value = arr;
                }
                else {
                    ElMessage.error(msg)
                }
            }
        )
}

// 获取分类列表
const getCategoryListFn = async () => {
    await categoryList()
        .then(
            content => {
                // console.log(content)
                let { code, result } = content;
                if (code == 200) {
                    categories.value = result;
                }
            }
        )
}


// 初始化数据
getCategoryListFn();
examListFn();




</script>

<style lang="scss">
.Visualized {
    display: flex;

    .box {
        border: 1px solid #ccc;
    }
}
</style>
